<template>
  <div class="Writing flex justify-between items-start">
    <div class="right">
      <div class="photo">
        <div class="title">
          <div class="title-text">写信须知</div>
        </div>
        <div class="photo-content">
          1、该信箱系统是党和政府密切联系群众的桥梁。社会公众可通过信箱对我县改革开放、经济建设和社会发展等各方面工作提出意见、批评、建议、设想和诉求。
          2、根据相关规定，涉法涉诉事项请依照规定程序向司法机关提出，投递给其他信箱的涉法涉诉信件将不予受理。
          3、写信前请认真阅读领导分工和写信须知，相同内容信件请勿重复提交。一信多投和重复提交的信件，只保留一件，其余信件将不予受理。广告类、无实质内容及其他不符合写信须知要求的信件不予受理。
          4、为便于解决问题和沟通，建议写信人留下真实姓名和联系方式。出于隐私保护，信件办理情况不会每件公开。
          5、信件提交成功后，系统将自动生成“信件编号”和“姓名”，请牢记“信件编号”和“姓名”，写信人可以用
          “信件编号”和“姓名”通过“信件查询”栏目搜索到信件办理情况。
          6、禁止一切对书记/县长信箱的攻击行为，禁止利用书记/县长信箱进行造谣、诽谤、传播反动言论等种种非法行为，违者将依法追究其责任。
          7、因系统兼容性请使用IE浏览器。写信过程中如有任何技术问题，请咨询书记/县长信箱系统维护电话：0816-5338105。
        </div>
      </div>
      <LetterInquiry class="form-cx"></LetterInquiry>
    </div>
    <div class="left">
      <div class="title">开始写信</div>
      <div class="content-form">
        <div class="form-title flex items-center justify-between">
          <div>
            收件人
            <span>吴明禹</span>
          </div>
          <div>
            写信时间：
            <span>2023年11月9日 17:2</span>
          </div>
        </div>
        <!-- 提交表单 -->
        <div class=" p-4 FormNew">
          <FormNew ref="FormNew" :form-data="formData" :data-info="FormElData" :rules="rules">
          </FormNew>
        </div>
      </div>
      <div class="button text-center">
        <el-button>
          提交
        </el-button>
        <el-button>
          重置
        </el-button>
      </div>
    </div>
  </div>
</template>

<script>
import TitleBox from "@STmailboxesWeb/components/titleBox";
import FormNew from "@/components/form/FormNew.vue";
import LetterInquiry from "@STmailboxesWeb/components/LetterInquiry";

export default {
  components: {
    TitleBox,
    FormNew,
    LetterInquiry
  },
  name: "Writing",
  data() {
    return {
      // 表单渲染项
      formData: [
        // 第一排
        {
          label: "来信人",
          prop: "typeName",
          type: "input",
          width: "45%",
          require: true,
          placeholder: "请输入姓名（必填）",
        },
        {
          label: "",
          prop: "typeName11",
          type: "button",
          width: "15 %",
          require: true,
          placeholder: "请输入姓名（必填）",
        },
        {
          label: "电子邮箱",
          prop: "mail",
          type: "input",
          width: "38%",
          require: true,
          placeholder: "请输入姓名",
        },
        // 第二排
        {
          label: "联系地址",
          prop: "arr3",
          type: "input",
          width: "100%",
          require: true,
          placeholder: "请输入联系地址",
        },
        // 第三排
        {
          label: "信件来源",
          prop: "sorc",
          type: "input",
          width: "60%",
          require: true,
          placeholder: "请输入信件来源",
        },
        {
          label: "联系电话",
          prop: "phone",
          type: "input",
          width: "38%",
          require: true,
          placeholder: "请输入联系电话（必填）",
        },
        // 第四排
        {
          label: "信件类型",
          prop: "typeName1",
          type: "radio",
          width: "100%",
          options: [{
            value: "1",
            label: "建议"
          }, {
            value: "2",
            label: "求助"
          }, {
            value: "3",
            label: "投诉"
          }, {
            value: "4",
            label: "咨询"
          }, {
            value: "5",
            label: "其他"
          }]
        },
        // 第五排
        {
          label: "信件主题",
          prop: "arr2",
          type: "input",
          width: "100%",
          require: true,
          placeholder: "请输入信件主题",
        },
        // 第六排
        {
          label: "",
          prop: "arr1",
          type: "textarea",
          width: "100%",
          require: true,
          placeholder: "请输入信件正文",
          maxlength: 800,
          rows: 8,
        },
        {
          type: "upload",
          prop: "applicableScenarioImages",
          showProp: "applicableScenarioImagesShow",
        },
      ],
      FormElData: {
        applicableScenarioImages: [
          {
            name: "food.jpeg",
            url: "https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100",
          },
          {
            name: "food2.jpeg",
            url: "https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100",
          },
        ],
        unsuitableScenarioImages: [],
        typeName1: "1"
      }, //表单数据
    };
  },
  created() {
    console.log("this.$router---", this.$route);
  },
  methods: {
    handleChange(file, fileList) {
      this.fileList = fileList.slice(-3);
    },
    toWrite() {
      this.$router.push({
        path: "/writing",
      });
    },
  },
};
</script>

<style lang='scss' scoped>
.Writing {
  width: 100%;

  .right {
    width: 29%;

    .photo {
      text-align: center;
      min-height: 447px;
      background: #f7fbff;
      border: 1px solid #d5d5d5;
      padding: 20px;

      .title {
        width: 100%;
        border-bottom: 1px dashed #698ab7;
        height: 34px;

        .title-text {
          text-align: center;
          line-height: 34px;
          width: 100px;
          height: 34px;
          background: linear-gradient(177deg, #3a8edc 0%, #2d72b2 100%);
          border-radius: 4px 4px 0px 0px;
          color: #fff;
        }
      }

      .photo-content {
        text-align: start;
        line-height: 20px;
        padding: 20px 0px;
      }
    }

    .form-cx {
      margin-top: 10px;

      background: #e2efff;
      border: 1px solid #d6ddeb;
    }

    .name {
      margin: 10px 0px;
      padding-bottom: 10px;
      border-bottom: 1px solid #d1cfcf;
    }
  }

  .left {
    width: 69%;
    min-height: 500px;
    background: #ffffff;
    border: 1px solid #d5d5d5;
    padding-bottom: 20px;

    .title {
      width: 100%;
      height: 40px;
      // line-height: 40px;
      background: linear-gradient(180deg, #ffffff 0%, #e9e9e9 100%);
      border: 1px solid #dbdbdb;
      padding: 10px 20px;
      font-size: 14px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #333333;
      line-height: 20px;
    }

    .content-form {
      margin: 20px;
      background: #ffffff;
      border-radius: 2px;
      border: 1px solid #d5d5d5;

      .form-title {
        width: 100%;
        height: 41px;
        background: #fbfbfb;
        border-radius: 2px;
        border: 1px solid #d5d5d5;
        padding: 10px 20px;

        font-size: 14px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #333333;
      }
    }
  }

  .c265697 {
    color: #265697;
  }
}

::v-deep {

  .button .el-button {
    width: 100px;
    height: 34px;
    background: linear-gradient(179deg, #3a8edc 0%, #2a6aa5 100%);
    border-radius: 2px;
    font-size: 14px;
    font-weight: 400;
    color: #ffffff;
    line-height: 34px;
    padding: 0px;
  }

  .button .el-button:last-child {
    background: linear-gradient(180deg, #FFFFFF 0%, #E9E9E9 100%);
    border: 1px solid #DBDBDB;
    color: #333333;
  }

  .FormNew .el-form-item {
    min-height: 28px;
  }

  .FormNew .el-form-item__label {
    width: 80px;
    height: 28px;
    line-height: 28px;
    background: linear-gradient(180deg, #FFFFFF 0%, #E9E9E9 100%);
    border-radius: 2px;
    text-align: center;
    border: 1px solid #DBDBDB;

    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #333333;
  }

  .FormNew .el-form-item__content {
    line-height: 28px;
  }

  .el-dropdown .el-button {
    background: linear-gradient(180deg, #FFFFFF 0%, #E9E9E9 100%);
    border-radius: 2px;
    text-align: center;
    border: 1px solid #DBDBDB;
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #333333;
  }

  .FormNew .el-input input {
    height: 28px;
  }
}
</style>